<template>
    <div class="edit">
        <!-- 主体 -->
        <div class="main">
            <!-- 添加接诊医生  -->
            <Button type="primary" class="primary" @click="addDoctr">
                <Icon type="ios-search" size="14"/>添加接诊医生
            </Button>
            <div class="doctor">
                <!-- 医院 -->
                <span>{{ selectExpert.hospitalname }}</span>
                <!-- 科室 -->
                <span>{{ selectExpert.deptName }}</span>
                <!-- 医生姓名 -->
                <span>{{ selectExpert.name }}</span>
            </div>
            <!-- 选择专家 -->
            <Modal v-model="modal1" title="选择专家" :footer-hide="true" width="800">
                <div class="modelExpert">
                    <div class="searchExpertList">
                        <input type="text" placeholder="输入医生姓名、医院、科室" v-model.trim="searchName">
                        <Button type="primary" icon="ios-search" @click="searchExpertClick"></Button>
                    </div>
                    <Table stripe :columns="columns" :data="expertList" style='width:100%;'></Table>
                    <div class="total">
                        <Page :total="expertSize" :current="expertNo" @on-change="change1"/>
                    </div>
                </div>
            </Modal>
            <!-- 远程门诊类型 -->
            <div class="item">
                <div class="item-text">
                    <span style="color:red;">*&nbsp;</span>
                    <p>远程门诊类型</p>
                </div>
                <Select class="w-select" @on-change="changeSearchType" v-model="searchType">
                    <Option
                        v-for="(item,index) in searchTypeList"
                        :value="item.id"
                        :key="item.id"
                        style='text-align:center;'
                    >{{item.name}}</Option>
                </Select>
                <p style="margin-left:20px;color:#ff9966;">！请先选择专家后，再选择远程门诊类型。</p>
            </div>
            <!-- 医事服务费 -->
            <div class="item">
                <div class="item-text">
                    <span style="color:red;">&nbsp; </span>
                    <p>医事服务费</p>
                </div>
                <p>{{ money }}元</p>
            </div>
            <!-- 远程门诊时长 -->
            <div class="item">
                <div class="item-text">
                    <span style="color:red;">*&nbsp;</span>
                    <p>远程门诊时长</p>
                </div>
                <Select class="w-select" v-model="time" @on-change="remoteData">
                    <Option v-for="item in timeList" :value="item.id" :key="item.id" style='text-align:center;'>{{item.name}}</Option>
                </Select>
            </div>
            <!--  预约周期 -->
            <div class="item">
                <div class="item-text">
                    <span style="color:red;">*&nbsp;</span>
                    <p>预约周期</p>
                </div>
                <Select class="w-select" v-model="cycle">
                    <Option v-for="item in cycleList" :value="item.id" :key="item.id" style='text-align:center;'>{{item.name}}</Option>
                </Select>
            </div>
            <!-- 列表 -->
            <div class="table">
                <p>远程门诊接诊数量</p>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>时间</td>
                        <td>预约时间段</td>
                        <td>星期一</td>
                        <td>星期二</td>
                        <td>星期三</td>
                        <td>星期四</td>
                        <td>星期五</td>
                        <td>星期六</td>
                        <td>星期天</td>
                    </tr>
                    <tr>
                        <td>上午</td>
                        <td>
                            <TimePicker
                                :value="value2"
                                format="HH:mm"
                                type="timerange"
                                placement="bottom-end"
                                placeholder="时间段"
                                style="width: 120px"
                                @on-change="changeTime" disabled='true' readonly
                                :disabled-hours="[0,1,2,3,4,13,14,15,16,17,18,19,20,21,22,23]"
                                hide-disabled-options
                            ></TimePicker>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.oneAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('oneAm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.twoAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('twoAm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.threeAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('threeAm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.fourAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('fourAm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.fiveAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('fiveAm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.sixAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('sixAm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="8" v-model="params.sevenAm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('sevenAm')"></i>
                        </td>
                    </tr>
                    <tr>
                        <td>下午</td>
                        <td>
                            <TimePicker
                                :value="value3"
                                format="HH:mm"
                                type="timerange"
                                placement="bottom-end"
                                placeholder="时间段"
                                style="width: 120px"
                                @on-change="changeTime1" disabled='true' readonly
                                :disabled-hours="[0,1,2,3,4,5,6,7,8,9,10,11,12]"
                                hide-disabled-options
                            ></TimePicker>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.onePm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('onePm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.twoPm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('twoPm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.threePm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('threePm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.fourPm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('fourPm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.fivePm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('fivePm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.sixPm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('sixPm')"></i>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="8" v-model="params.sevenPm" disabled='true'></InputNumber>
                            <i class="iconfont icon-butongyi" style="font-size:16px;margin-left:5px" @click="del('sevenPm')"></i>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 预约备注 -->
            <div class="text">
                <span>预约备注：</span>
                <Input v-model.trim="text_info" type="textarea" maxlength="80" :rows="4" placeholder="请输入备注"/>
            </div>
            <!-- 保存 -->
            <div class="save">
                <Button type="primary" @click="save" class="btn">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="back"  class="btn">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </div>
        </div>
    </div>
</template>
<script>
import tempHeader from "@/components/tmpHeader";
import { TimePicker } from "view-design";
import api from "@/api/commonApi";
export default {
    components: {
        tempHeader,
        TimePicker
    },
    data() {
        return {
            // 门诊类型
            searchType: -1,
            searchTypeList: [],
            money: 0,
            //   接诊时长
            time: 30,
            timeList: [
                { id: 30, name: "30分钟" },
                { id: 20, name: "20分钟" },
                { id: 15, name: "15分钟" },
                { id: 10, name: "10分钟" }
            ],
            topLength: 888,
            botLength: 888,
            //   预约周期
            cycle: 7,
            cycleList: [
                // { id: 1, name: "一天" },
                // { id: 2, name: "二天" },
                // { id: 3, name: "三天" },
                // { id: 4, name: "四天" },
                // { id: 5, name: "五天" },
                // { id: 6, name: "六天" },
                { id: 7, name: "七天" },
                { id: 8, name: "八天" },
                { id: 9, name: "九天" },
                { id: 10, name: "十天" },
                { id: 11, name: "十一天" },
                { id: 12, name: "十二天" },
                { id: 13, name: "十三天" },
                { id: 14, name: "十四天" },
                { id: 15, name: "十五天" }
            ],
            switch1: true,
            text_info: "",
            // 添加专家model
            modal1: false,
            expertNo: 1,
            expertSize: 10,
            // 上午时间
            value2: ["08:00", "12:00"],
            // 下午时间
            value3: ["13:00", "17:00"],
            // 一周号源
            params: {
                // 周一
                oneAm: 0,
                onePm: 0,
                // 周二
                twoAm: 0,
                twoPm: 0,
                // 周三
                threeAm: 0,
                threePm: 0,
                // 周四
                fourAm: 0,
                fourPm: 0,
                // 周五
                fiveAm: 0,
                fivePm: 0,
                // 周六
                sixAm: 0,
                sixPm: 0,
                // 周天
                sevenAm: 0,
                sevenPm: 0
            },
            // 医院ID
            id: 82,
            selectExpert: {},
            expertList: [
                {
                    hospital: "蚌埠中医院",
                    deparment: "内科",
                    name: "李正兰",
                    host: "主任医师"
                }
            ],
            // 医生表头信息
            columns:[
                {
                    title:"医院名称",
                    key:"hospitalname",
                    align:"center"
                },
                {
                    title:"科室名称",
                    key:"deptName",
                    align:"center"
                },
                {
                    title:"医生名称",
                    key:"name",
                    align:"center"
                },
                {
                    title:"职称",
                    key:"titleName",
                    align:"center"
                },
                {
                    title:"选择",
                    align:"center",
                    render:(h,params) =>{
                        let row = params.row;
                        
                        return [
                            h('a',{
                                on:{
                                    click: () => {
                                        this.expert(row)
                                    }
                                }
                            },"选择")
                        ]
                    }
                }
            ],
            searchName: "",
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,
        };
    },
    created() {
        this.province = this.$route.query.province?parseInt(this.$route.query.province):null;
        this.city = this.$route.query.city?parseInt(this.$route.query.city):null;
        this.area = this.$route.query.area?parseInt(this.$route.query.area):null;
        this.hospital = this.$route.query.hospital?this.$route.query.hospital:null;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/operation/remoteclinic/list",
                title: "远程门诊"
            }
        ];
        this.$emit("changeBreadList", breadList);
        this.remoteData()
    },
    methods: {
        del(val) {
            this.params[val] = 0 
        },
        addDoctr() {
            this.searchExpert();
            this.modal1 = true;
        },
        //  取消,后退 上一次
        back() {
            let pageNo = this.$route.query.pageNo;
            // function全局方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/remoteclinic/list",
                {
                    pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2
                }
            );
        },
        // 根据选择不同的门诊类型改变不同的价格
        changeSearchType(val) {
            this.searchTypeList.forEach(item => {
                if (item.id == val) {
                    this.money = item.cost;
                }
            });
        },
        // 模态框的分页器改变
        change1(index) {
            this.expertNo = index;
            this.searchExpert();
        },
        searchExpertClick(){
            this.expertNo = 1;
            this.searchExpert();
        },
        // 保存/新增专家
        save() {
            // 号源
            let params = this.params;
            // 远程门诊类型
            params.outpatintTypeId = this.searchType;
            // 门诊时长
            params.outpatientTime = this.time;
            // 门诊周期
            params.cycleDay = this.cycle;
            // 备注
            params.remarks = this.text_info;
            // 上午间隔时间
            params.intervalTimeAmStart = this.value2[0] || null;
            params.intervalTimeAmEnd = this.value2[1] || null;
            // 下午间隔时间
            params.intervalTimePmStart = this.value3[0] || null;
            params.intervalTimePmEnd = this.value3[1] || null;
           // 医生id
            params.doctorId = this.selectExpert.id;
            params.doctorName = this.selectExpert.name;
            params.title = this.selectExpert.title;
            params.titleName = this.selectExpert.titleName;
            // 医院ID
            params.hospitalId = this.selectExpert.hospitalid;
            params.deptName = this.selectExpert.deptName;
            params.deptType = this.selectExpert.deptType;
            params.hospitalName = this.selectExpert.hospitalname;
            this.searchTypeList.forEach(item => {
                if (item.id == this.searchType) {
                    params.outpatintTypeName = item.name;
                }
            });
            console.log(params);
            if (this.searchType == -1) {
                this.$Message.info("请选择远程门诊类型");
            } else if (this.time < 0) {
                this.$Message.info("请选择远程门诊时长");
            } else if (this.cycle < 0) {
                this.$Message.info("请选择远程门诊周期");
            } else if (!params.intervalTimeAmEnd || !params.intervalTimePmEnd) {
                this.$Message.info("请查看预约时间段是否未填写完整");
            } else if (params.doctorId == "") {
                this.$Message.info("请选择专家");
            } else {
                this.$axios.post(api.insertRemoteDoctorMaster, params).then(res => {
                    if (res.data.code) {
                        this.$Message.info("添加成功");
                        let pageNo = this.$route.query.pageNo;
                        setTimeout(() => {
                            // function全局方法
                            this.functionJS.queryNavgationTo(
                                this,
                                "/index/doctorOperation/remoteclinic/list",
                                {
                                    pageNo,
                                    province: this.province,
                                    city: this.city,
                                    area: this.area,
                                    hospital: this.hospital,
                                    isBack: 2
                                }
                            );
                        }, 800);
                    }
                });
            }
        },
        // 选择专家
        expert(item) {
            this.modal1 = false;
            this.selectExpert = item;
            this.getRemoteClinic(item.hospitalid);
        },
        // 远程门诊时间改变
        remoteData() {
            // 设置上午时间
            if (Boolean(this.value2)) {
                let m1 = Number(this.value2[0].split(":")[1]);
                let s1 = this.value2[0].split(":")[0] * 60 + m1;
                let m2 = Number(this.value2[1].split(":")[1]);
                let s2 = this.value2[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                if (count < this.time) {
                    this.$Message.info("开始时间与结束时间不能相同");
                    return "";
                }
                if (Boolean(count)) {
                    this.topLength = parseInt(count / this.time);
                } else {
                    this.topLength = null;
                }
                this.params.oneAm = this.topLength;
                this.params.twoAm = this.topLength;
                this.params.threeAm = this.topLength;
                this.params.fourAm = this.topLength;
                this.params.fiveAm = this.topLength;
                this.params.sixAm = this.topLength;
                this.params.sevenAm = this.topLength;
            }
            // 设置下午时间
            if (Boolean(this.value3)) {
                let m1 = Number(this.value3[0].split(":")[1]);
                let s1 = this.value3[0].split(":")[0] * 60 + m1;
                let m2 = Number(this.value3[1].split(":")[1]);
                let s2 = this.value3[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                if (count < this.time) {
                    this.$Message.info("开始时间与结束时间不能相同");
                    return "";
                }
                console.log(count);
                if (Boolean(count)) {
                    this.botLength = parseInt(count / this.time);
                } else {
                    this.botLength = null;
                }
                this.params.onePm = this.botLength;
                this.params.twoPm = this.botLength;
                this.params.threePm = this.botLength;
                this.params.fourPm = this.botLength;
                this.params.fivePm = this.botLength;
                this.params.sixPm = this.botLength;
                this.params.sevenPm = this.botLength;
            }
        },
        // 选择时间/上午
        changeTime(val) {
            this.value2 = val;
            if (Boolean(val)) {
                let m1 = Number(val[0].split(":")[1]);
                let s1 = val[0].split(":")[0] * 60 + m1;
                let m2 = Number(val[1].split(":")[1]);
                let s2 = val[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                if (count < this.time) {
                    this.$Message.info("开始时间与结束时间不能相同");
                    return "";
                }
                if (Boolean(count)) {
                    this.topLength = parseInt(count / this.time);
                } else {
                    this.topLength = null;
                }

                this.params.oneAm = this.topLength;
                this.params.twoAm = this.topLength;
                this.params.threeAm = this.topLength;
                this.params.fourAm = this.topLength;
                this.params.fiveAm = this.topLength;
                this.params.sixAm = this.topLength;
                this.params.sevenAm = this.topLength;
            }
        },
        // 选择时间/下午
        changeTime1(val) {
            this.value3 = val;
            if (Boolean(val)) {
                let m1 = Number(val[0].split(":")[1]);
                let s1 = val[0].split(":")[0] * 60 + m1;
                let m2 = Number(val[1].split(":")[1]);
                let s2 = val[1].split(":")[0] * 60 + m2;
                let count = s2 - s1;
                if (count < this.time) {
                    this.$Message.info("开始时间与结束时间不能相同");
                    return "";
                }
                if (Boolean(count)) {
                    this.botLength = parseInt(count / this.time);
                } else {
                    this.botLength = null;
                }
                this.params.onePm = this.botLength;
                this.params.twoPm = this.botLength;
                this.params.threePm = this.botLength;
                this.params.fourPm = this.botLength;
                this.params.fivePm = this.botLength;
                this.params.sixPm = this.botLength;
                this.params.sevenPm = this.botLength;
            }
        },
        // 远程门诊类型
        getRemoteClinic(id) {
            this.$axios
                .post(api.findRemoteOutpatientTypeList, {
                    hospitalId: id
                })
                .then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.searchTypeList = ret;
                    }
                });
        },
        // 获取医生权限管理
        searchExpert() {
            this.$axios
                .post(api.findRemoteDoctorList, {
                    pageNo: this.expertNo,
                    pageSize: 10,
                    searchKey: this.searchName.trim(),
                    iremote: 1
                })
                .then(res => {
                    if (res.data.code) {
                        this.expertList = res.data.object.records;
                        this.expertSize = res.data.object.total;
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
.edit {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .main {
        width: 80%;
        margin: 15px auto;
        .doctor {
            width: 100%;
            display: flex;
            height: 40px;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            span {
                margin-right: 20px;
                font-size: 20px;
            }
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            .item-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 130px;
            }
            .w-select {
                width: 150px;
            }
        }
        .table {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            p {
                text-align: center;
                margin: 10px 0;
            }
            table {
                width: 100%;
                border: 1px solid #ddd;
                tr:not(:first-child):hover {
                    background: #ebf7ff;
                }
                tr:first-child{
                    background: #f8f8f9;
                }
                tr {
                    border-top: 1px solid #ddd;
                    height: 40px;
                    td {
                        text-align: center;
                    }
                    td.none {
                        display: none;
                    }
                }
            }
            .nodata {
                width: calc(100% - 1px);
                line-height: 40px;
                background: #fff;
                border: 1px solid #ddd;
                border-top: none;
                text-align: center;
            }
        }
        .text {
            width: 100%;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .save {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 200px;
            margin: 10px auto;
            justify-content: space-around;
            .btn {
                width: 75px;
                height: 35px;
            }
        }
    }
}
.modelExpert {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .total {
        text-align: center;
        margin: 10px 0;
    }
    .modelExpert_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        span {
            width: 25%;
            text-align: center;
            user-select: none;
        }
    }
    .searchExpertList {
        width: 100%;
        margin-bottom: 20px;
        input {
            width: 40%;
            background: #fff;
            border: none;
            outline: none;
            text-indent: 10px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    }
}
</style>

